<template>
  <div class="course-manage">
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="courseManageStore.queryForm"
      class="query-form"
    >
      <el-form-item label="课程编号">
        <el-input
          v-model="courseManageStore.queryForm.courseId"
          placeholder="请输入课程编号"
        />
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input
          v-model="courseManageStore.queryForm.courseName"
          placeholder="请输入课程名称"
        />
      </el-form-item>
      <el-form-item label="院系">
        <el-select
          v-model="courseManageStore.queryForm.department"
          placeholder="选择院系"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="c in courseManageStore.departmentList"
            :key="c"
            :label="c"
            :value="c"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="toolbar">
      <el-button type="primary" @click="openDialog()">新增课程</el-button>
      <el-button type="danger" @click="del">批量删除</el-button>
    </div>

    <!-- 课程表格 -->
    <el-table
      :data="pagedData"
      border
      stripe
      style="width: 100%"
      @selection-change="selected"
      :row-style="{ height: '45px' }"
      max-height="65vh"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="courseId" label="课程编号" width="150" sortable />
      <el-table-column
        prop="courseName"
        label="课程名称"
        width="180"
        sortable
      />
      <el-table-column prop="credit" label="学分" width="100" sortable />
      <el-table-column prop="teacher" label="任课教师" width="150" />
      <el-table-column prop="department" label="院系" sortable />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <template v-if="scope.row.courseId">
            <el-button
              size="small"
              type="primary"
              plain
              @click="openDialog(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              plain
              @click="remove(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <Pagination
      v-model:currentPage="currentPage"
      v-model:pageSize="pageSize"
      :total="courseManageStore.tableData.length"
      @change="loadData"
    />

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="课程录入" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="课程编号">
          <el-input v-model="form.courseId" placeholder="请输入课程编号" />
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="form.courseName" placeholder="请输入课程名称" />
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="form.credit" placeholder="请输入学分" />
        </el-form-item>
        <el-form-item label="任课教师">
          <el-input v-model="form.teacher" placeholder="请输入任课教师" />
        </el-form-item>
        <el-form-item label="院系">
          <el-select v-model="form.department" placeholder="请选择院系">
            <el-option
              v-for="c in courseManageStore.departmentList"
              :key="c"
              :label="c"
              :value="c"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Pagination from '@/components/Pagination/index.vue'
import useCourseManageStore from '@/store/modules/course'
import { ElMessage, ElMessageBox } from 'element-plus'

const courseManageStore = useCourseManageStore()

// 查询回调
const query = () => {
  courseManageStore.queryData()
}

// 重置回调
const resetQuery = () => {
  courseManageStore.reset()
  ElMessage.success('重置成功！')
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  const pageItems = courseManageStore.tableData.slice(start, end)
  const emptyCount = pageSize.value - pageItems.length
  if (emptyCount > 0) {
    for (let i = 0; i < emptyCount; i++) {
      pageItems.push({
        id: NaN,
        courseId: '',
        courseName: '',
        credit: '',
        teacher: '',
        department: '',
      })
    }
  }
  return pageItems
})

// 弹窗
const dialogVisible = ref(false)
const form = ref<any>({})
const openDialog = (row?: any) => {
  if (row && row.id) {
    form.value = { ...row }
  } else {
    form.value = {
      courseId: '',
      courseName: '',
      credit: '',
      teacher: '',
      department: '',
    }
  }
  dialogVisible.value = true
}
const save = () => {
  if (
    !form.value.courseId ||
    !form.value.courseName ||
    !form.value.credit ||
    !form.value.teacher ||
    !form.value.department
  ) {
    return ElMessage.warning('请填写完整信息')
  }
  if (isNaN(form.value.id)) {
    courseManageStore.addCourse({ ...form.value })
    ElMessage.success('新增成功')
  } else {
    courseManageStore.updateCourse({ ...form.value })
    ElMessage.success('修改成功')
  }
  dialogVisible.value = false
}

// 删除
let idArr: any = []
// 批量删除
const del = () => {
  if (idArr.length === 0) return ElMessage.warning('请选择要删除的数据')

  ElMessageBox.confirm('是否确认删除选中的课程？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      courseManageStore.removeBatch(idArr)
      ElMessage.success('删除成功')
      idArr = []
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}
const selected = (data: any) => {
  idArr = []
  data.forEach((v: any) => v.id && idArr.push(v.id))
}
// 单条删除
const remove = (id: any) => {
  ElMessageBox.confirm('是否确认删除该课程？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      courseManageStore.remove(id)
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 分页变化
const loadData = ({ page, pageSize }: { page: number; pageSize: number }) => {
  console.log('分页变化：', page, pageSize)
}
</script>

<style scoped lang="scss">
.course-manage {
  font-size: 15px;
  .query-form {
    margin-bottom: 20px;
  }
  .toolbar {
    margin-bottom: 15px;
  }
}
.el-dialog {
  .el-form {
    .el-form-item {
      margin: 20px 0;
    }
  }
}
</style>
